<template>
  <div>
    <!--主体-->
    <el-container>
      <!--上半部分-->
      <el-header class="layout-header">
        <div class="login-user">
          <span class="welcome">欢迎回来,<b>{{ loginUser.username }}</b>! </span>
          <el-dropdown  @command="handleCommand">
            <el-avatar size="small" :src="loginUser.avatar"></el-avatar>
            <el-dropdown-menu slot="dropdown">
<!--              <el-dropdown-item icon="el-icon-plus">修改资料</el-dropdown-item>-->
<!--              <el-dropdown-item icon="el-icon-circle-plus">修改头像</el-dropdown-item>-->
<!--              <el-dropdown-item icon="el-icon-circle-plus-outline">修改密码</el-dropdown-item>-->
              <el-dropdown-item icon="el-icon-check" command="openLogoutConfirm">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <h1>千寻房产交易平台</h1>
      </el-header>
      <!--下半部分-->
      <el-container class="layout-body">
        <!--下班部分侧栏-->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color="#222"
              text-color="#fff"
              active-text-color="#fff"
              unique-opened
          >
            <!--首页-->
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-office-building"></i>
                <span>房源管理</span>
              </template>
              <el-menu-item index='/house/lease-house'>
                <i class="el-icon-office-building"></i>
                <span slot="title">出租房源</span>
              </el-menu-item>
              <el-submenu index="1-4">
                <template slot="title"><i class="el-icon-office-building"></i>售卖房源</template>
                <el-menu-item index="/house/new-house"><i class="el-icon-office-building"></i>新房</el-menu-item>
                <el-menu-item index="/house/second-hand-house"><i class="el-icon-office-building"></i>二手房</el-menu-item>
              </el-submenu>
              <el-menu-item index="/house/section">
                <i class="el-icon-s-grid"></i>
                <span slot="title">区域管理</span>
              </el-menu-item>
            </el-submenu>
            <!--经纪人管理-->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>经纪人管理</span>
              </template>
              <el-menu-item index="/house/agent">
                <i class="el-icon-s-custom"></i>
                <span slot="title">经纪人详情</span>
              </el-menu-item>
            </el-submenu>
            <!--新闻管理-->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>新闻管理</span>
              </template>
              <el-menu-item index="/news/newsDetail">
                <i class="el-icon-document"></i>
                <span slot="title">新闻内容</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/user">
                <i class="el-icon-wallet"></i>
                <span slot="title">用户详情</span>
              </el-menu-item>
<!--              <el-menu-item index="/userReservation">-->
<!--                <i class="el-icon-wallet"></i>-->
<!--                <span slot="title">预约信息</span>-->
<!--              </el-menu-item>-->
            </el-submenu>

<!--            <el-submenu index="7">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-info"></i>-->
<!--                <span>反馈管理</span>-->
<!--              </template>-->
<!--              <el-menu-item index="7-1" disabled>-->
<!--                <i class="el-icon-error"></i>-->
<!--                <span slot="title">暂无内容</span>-->
<!--              </el-menu-item>-->
<!--            </el-submenu>-->
            <!--管理员管理-->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>管理员管理</span>
              </template>
              <el-menu-item index="/permission/admin">
                <i class="el-icon-s-custom"></i>
                <span slot="title">管理员管理</span>
              </el-menu-item>
              <el-menu-item index="/permission/role">
                <i class="el-icon-collection-tag"></i>
                <span slot="title">角色管理</span>
              </el-menu-item>
              <el-menu-item index="/permission/permission">
                <i class="el-icon-s-check"></i>
                <span slot="title">权限管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--下班部分右侧主体-->
        <el-main class="layout-main">
          <!--将由其他视图组件来显示-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenuItemPath:'',
      loginUser:{

      }
    };
  },
  methods: {
    // 处理选中下拉菜单中的选项
    handleCommand(command) {
      if (command == 'openLogoutConfirm'){
        this.openLogoutConfirm();
        }
    },
    loadLoginInfo() {
      let loginInfo = localStorage.getItem('localJwt');

      if (!loginInfo) {
        localStorage.removeItem('localJwt');
        this.$router.push('/login');
        return;
      }

      let url = 'http://localhost:9201/admin/standard';
      console.log('url=' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult)
        if (jsonResult.state == 20000) {
          this.loginUser = jsonResult.data;
          console.log(this.loginUser)
        }
      });
    },
    // 打开登出确认框
    openLogoutConfirm() {
      let message = '即将退出登录，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      });
    },
    // 处理登出
    handleLogout() {
      localStorage.removeItem('localJwt');
      this.$router.push('/login');
      /*let url = 'http://localhost:9500/admins/logout';
      console.log('url = ' + url);

      let jwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({'headers': {'Authorization': jwt.token}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          localStorage.removeItem('localJwt');
          this.$router.push('/login');
        }
      });*/
    },

    handleActiveMenuItem() {
      let currentPath = this.$router.currentRoute.path;

      if (currentPath.startsWith('/permission/role')) {
        currentPath = '/permission/role';
      }
      if (currentPath.startsWith('/permission/admin')) {
        currentPath = '/permission/admin';
      }
      if (currentPath.startsWith('/permission/permission')) {
        currentPath = '/permission/permission';
      }
      if (currentPath.startsWith('/house/section')) {
        currentPath = '/house/section';
      }
      if (currentPath.startsWith('/house/agent')) {
        currentPath = '/house/agent';
      }
      if (currentPath.startsWith('/house/lease-house')) {
        currentPath = '/house/lease-house';
      }
      if (currentPath.startsWith('/house/new-house')) {
        currentPath = '/house/new-house';
      }
      if (currentPath.startsWith('/house/second-hand-house')) {
        currentPath = '/house/second-hand-house';
      }
      if (currentPath.startsWith('/news/newsDetail')) {
        currentPath = '/news/newsDetail';
      }
      if (currentPath.startsWith('/userReservation')) {
        currentPath = '/userReservation';
      }
      //userReservation
      if (currentPath.startsWith('/user')) {
        currentPath = '/user';
      }

      this.activeMenuItemPath = currentPath;
    }
  },

  mounted() {
    this.handleActiveMenuItem();
    this.loadLoginInfo();

  }
}
</script>
<style>
.layout-header {
  background: #1684b0;
}

.layout-header h1 {
  line-height: 60px;
  color: #fff;
}

.layout-header .login-user {
  float: right;
  display: flex;
  margin-top: 16px;
}

.layout-header .login-user .welcome {
  line-height: 28px;
  color: #fff;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #222;
}

.layout-aside .el-menu{
  border: 0;
}

.layout-aside i{
  color: #fff !important;
}

.el-menu-item.is-active{
  background: #2c3e50 !important;
}

.layout-main {
  background: #fff;
}
</style>